<template>
  <h2>reactive</h2>
  <p>{{ state.name }}</p>
  <p>{{ state.age }}</p>
  <button @click="change">btn</button>
</template>

<script>
// import { ref } from "vue";
import { reactive } from "vue";
export default {
  setup() {
    // const name = ref("zhangmou");
    // const age = ref(18);
    // const change = () => {
    //   age.value = 16;
    // };
    // return { name, age, change };

    //todo reactive一般用于一次性定义多个变量
    //todo 在表单提交的时候比较方便
    const state = reactive({
      name: "zhangmou",
      age: 18,
    });

    const change = () => {
      state.age = 16;
    };

    return { state, change };
  },
};
</script>
